<template>
  <div class="huangye">
    <div class="huangye_body minh389">
      <div class="hangye_nav_sy">
        <div class="title_l">建设黄页</div>
        <div class="iconfont icon-triangle-right"></div>
        <div
          class="huang_li"
          v-for="(item, index) in huangNav"
          :key="index"
          @click="nativeTo(item)"
        >
          {{ item.name }}
        </div>
      </div>

      <img :src="httpp+secondImg" alt="" class="fill_img" @click="nativeTo('login')" v-if="secondImg"/>

      <!-- <div class="hang_fenge_sy">
        <div class="left_fen">
          <div class="iconfont icon-weibiaoti206"></div>
          <div class="tit_name">行业排头兵</div>
        </div>
        <div class="right_fen"></div>
      </div>
      <swiper :options="swiperOption">
        <swiper-slide
          class="swiper-slide-l"
          v-for="(item, index) in hangyeList"
          :key="index"
          
        >
          <div class="lie_list">
            <div
              class="img2_box"
              v-for="(itemC, indexC) in item"
              :key="indexC"
              @click="nativeToPT(itemC)"
            >
              <img
                class="paitoubing_img"
                :src="httpp + itemC.weblogo"
              />
            </div>
          </div>
        </swiper-slide>
      </swiper> -->
      <div class="hang_fenge_sy">
        <div class="left_fen">
          <div class="iconfont icon-weibiaoti206"></div>
          <div class="tit_name">全部企业</div>
        </div>
        <div class="right_fen"></div>
      </div>
      <div class="tuijian_qiye_sy">
        <div
          class="tui_box"
          v-for="(parent, indexp) in tuijianList"
          :key="indexp"
        >
          <div class="pt1">
            <div class="l_title" @click="nativeToPT(parent)">{{ parent.companyname }}</div>
            <div class="r_title">
              <span class="color_lei">企业类型 :</span>
              <span>{{ parent.ziyuantype }}</span>
            </div>
          </div>
          <div class="img_text_box">
            <div
              class="item_p"
              v-for="(item, index) in parent.listitem"
              :key="index"
              @click="nativeToDT(parent,item)"
            >
              <img
                :src="httpp + item.thumbnail"
                class="img2i"
              />
              <div class="title_sm shengluehao">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageN"
          layout="prev, pager, next, jumper"
          :total="totalnum">
        </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  mounted(){
    this.httpp = this.$httpp;
    this.$getApi("/common/config",{}).then(res=>{
      let resData = res.data;
      console.log(resData,"备用公用")
      this.secondImg =  res.data.jshyimg;
    })
    //资源类型
    this.$getApi("/common/danweitype", {}).then((res) => {
      console.log(res);
      this.huangNav = res.data;
    });
    // this.$getApi("/common/companylist", {key:this.biaotiInput}).then((res) => {
    //   console.log(res);
    //   this.gongRightList = res.data;
      
    //   let hangyeList = [];
      
      
    //   let hangyeNum = Math.ceil(this.gongRightList.length / 4)
      
    //   console.log(hangyeNum)
    //   for(let i=0 ;i< hangyeNum;i++ ){
    //     hangyeList.push(this.gongRightList.slice(i*4,(i+1)*4))
    //   }
    //   this.hangyeList = hangyeList
 
    // });

    // this.$getApi("/common/allgongsijiayeji", {}).then((res) => {
    //   console.log(res);
    //   this.tuijianList = res.data;
    // });
    this.getDataAll(this.currentPage)
  },
  data() {
    return {
      gongRightList:[],
      hangyeList:[],
      tuijianList:[],
      httpp:"",
      huangNav: [],
      swiperOption: {
        autoplay: 5000,
        speed: 500,
        loop: true,
      },
      secondImg:"",
      currentPage: 1,
      pageN:10, //每页显示多少条
      totalnum:0
    };
  },
  methods: {
    getDataAll(page){
      this.$getApi("/common/tuijiancompanylist", {page:page,showall:1}).then((res) => {
        console.log(res);
        
        this.tuijianList = res.data.tuilist;  //推荐
        this.totalnum = res.data.totalnum
        // this.gongRightList = res.data.headerlist; //排头兵
        // let hangyeList = [];
        
        
        // let hangyeNum = Math.ceil(this.gongRightList.length / 4)
        
        // console.log(hangyeNum)
        // for(let i=0 ;i< hangyeNum;i++ ){
        //   hangyeList.push(this.gongRightList.slice(i*4,(i+1)*4))
        // }
        // this.hangyeList = hangyeList
  
      }); 
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getDataAll(this.currentPage)
    },

    nativeTo(item) {
      
      if(item == 'login'){
        this.$router.push({ path: "/login" });
      }else{
        this.$router.push({ path: "/huangyeSel" });
      }
    },
    nativeToPT(item){
      console.log(item)
      this.$router.push({path:"/hezuo",query:{id:item.id,sel:0}})
    },
    nativeToDT(parent,item){
      this.$router.push({path:"/hezuo",query:{cid:item.id,id:parent.id,sel:3,type:2,from:'home'}})
    }
  },
};
</script>

<style scoped lang="stylus">
.huangye {
  .paitoubing_img{
    width 240px;
    height 70px
  }
  .huangye_body {
    width: 1000px;
    margin: 0 auto;
    padding-top: 20px;
  }

  .fill_img {
    padding-top: 12px;
    cursor pointer
  }

  .lie_list {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;

    .img2_box {
      margin: 12px 0 0;
      box-shadow: 1px 1px 4px #ccc;
      width: 24%;
      cursor: pointer;
      &+.img2_box{
        margin-left 12px;
      }
      .img2 {
        width: 100%;
        height: auto;
      }
    }
  }
}

.hang_fenge_sy {
  display: flex;
  justify-content: space-between;
  background-color: #f0f0f0;
  box-shadow: 1px 1px 4px #333;
  padding: 0px 20px;
  margin-top: 16px;

  .left_fen {
    display: inline-flex;
    align-items: center;

    .icon-weibiaoti206 {
      color: #2172ce;
      margin-right: 10px;
      font-size: 26px;
    }

    .tit_name {
      color: #000;
      font-size: 16px;
      // font-weight bold;
    }
  }
}

.tuijian_qiye_sy {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px;

  .tui_box {
    width: 496px;

    .pt1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      background-color: #F2F2F2;

      // margin 6px 0 0;
      .l_title {
        font-size: 17px;
        color: #0a4678;
        cursor: pointer;
      }

      .r_title {
        font-size: 16px;

        .color_lei {
          color: #999;
          padding-right: 3px;
        }
      }
    }

    .img_text_box {
      width: 496px;
      display: flex;
      padding: 3px;
      background-color: #fff;
      border: 1px solid #F2F2F2;
      border-top: none;
      box-sizing: border-box;
      margin-bottom: 10px;
      align-items: flex-end;
      .item_p {
        width: 160px;
        cursor: pointer;

        +.item_p {
          margin-left: 4px;
        }

        .img2i {
          width: 100%;
          height 110px;
        }

        .title_sm {
          padding: 2px 0 6px 4px;
          width: 90%;
          font-size: 15px;
          color: #0a4678;
        }
      }

      .item_p:hover {
        .title_sm {
          color: #2172ce;
        }
      }
    }
  }
}
</style>
